<template>
  <div class="z-tree-item">
    <div style="cursor:pointer;" @click="totle">
      <span v-if="isShowFloder" class="z-tree-text">
        <span v-if="open">
          <slot>
            -
          </slot>
          <slot name="openIcon"/>
        </span>
        <span v-else>
          <slot>
            +
          </slot>
          <slot name="closeIcon"/>
        </span>
      </span>
      {{treeData.label }}
    </div>
    <div v-if="isShowFloder" v-show="open">
      <z-tree-item
        v-for="item in treeData.children"
        :key="item.label"
        :treeData="item"
      >
      </z-tree-item>
    </div>
  </div>
</template>

<script>
export default {
  // this name is necessary
  name: 'z-tree-item',
  props: {
    treeData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      open: false
    }
  },
  computed: {
    isShowFloder() {
      return this.treeData.children && this.treeData.children.length
    }
  },
  methods: {
    totle() {
      this.isShowFloder && (this.open = !this.open);
    }
  }
}
</script>
